<template>
	<view class="home">
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
				<swiper-item v-for="item in bannerList" :key="item.id">
					<view class="swiper-item">
						<image :src="item.img"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="icon">
			<view class="icon_item" v-for="item in navs" :key="item.id" @click="navToPath(item.path)">
				<i :class="item.icon"></i>
				<view class="text">{{item.title}}</view>
			</view>
		</view>
		<view class="title">推荐商品</view>
		<goods-list :goodsList="goodsList"></goods-list>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue';
	export default {
		data() {
			return {
				title: 'Hello',
				bannerList:[],
				goodsList:[],
				pageindex:0,
				navs: [
					{	
						id:'001',
						icon: 'iconfont icon-ziyuan',
						title: '黑马超市',
						path: '/pages/goods/goods'
					},
					{
						id:'002',
						icon: 'iconfont icon-guanyuwomen',
						title: '联系我们',
						path: '/pages/contact/contact'
					},
					{
						id:'003',
						icon: 'iconfont icon-tupian',
						title: '社区图片',
						path: '/pages/pictures/pictures'
					},
					{
						id:'004',
						icon: 'iconfont icon-shipin',
						title: '学习视频',
						path: '/pages/videos/videos'
					}
				]
			}
		},
		components:{
			goodsList
		},
		onLoad() {
			//console.log(this.request)
			this.getBanner()
			this.getGoodsList()
		},
		methods: {
			async getBanner(){
				const res = await this.$request({url:"/api/getlunbo"})
				//console.log(res)
				this.bannerList=res.data.message
			},
			async getGoodsList(){
				this.pageindex++
				const res = await this.$request({url:"/api/getgoods",data:{pageindex:this.pageindex}})
				const len=res.data.message.length
				console.log(len)
				if(len===0){
					uni.showToast({
						title: '没有更多了'
					});
					return
				}
				this.goodsList=[...this.goodsList,...res.data.message]
			},
			navToPath(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.home{
		.banner{
			swiper{
				width: 750rpx;
				height: 380rpx;
				.swiper-item{
					width: 100%;
					height: 100%;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.icon{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		padding: 5px;
		.icon_item{
			width: 25%;
			height: 105px;
			i{
				display:block;
				width: 60px;
				height: 60px;
				line-height: 60px;
				background-color: $color;
				font-size: 25px;
				color: #fff;
				//padding: 5px;
				margin: 10px;
				border-radius: 50%;
				text-align: center;
			}
			.text{
				font-size: 16px;
				font-weight: normal;
				text-align: center;
			}
		}
	}
	.title{
		text-align: center;
		padding-top: 10rpx;
		margin: 10px 0;
		letter-spacing: 20px;
		color: $color;
		border-top: 5rpx solid #ccc;
	}
	
</style>
